import React, { Component } from 'react'
import { Carousel, WingBlank } from 'antd-mobile'
class MyCarousel extends Component {
  render() {
    const carouselList = this.props.carouselList
    return (
      <WingBlank>
        <Carousel
          autoplay={true}
          infinite
          dotStyle={{
            width: ' 0.2rem',
            height: ' 0.03rem',
            background: ' #fff',
            opacity: ' .4',
            borderRadius: ' 0',
          }}
          dotActiveStyle={{
            width: ' 0.2rem',
            height: ' 0.03rem',
            background: ' #fff',
            opacity: '1',
            borderRadius: ' 0',
          }}
        >
          {carouselList.map((val) => (
            <a
              key={val}
              href={val.targetUrl}
              style={{
                display: 'inline-block',
                width: '100%',
                height: '3.75rem',
              }}
            >
              <img
                src={val}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'))
                  this.setState({ imgHeight: 'auto' })
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    )
  }
}

export default MyCarousel
